<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>ZTREE DEMO</title>
    <link rel="stylesheet" href="/assets/lib/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <style type="text/css">
        .ztree * {
            font-size: 16px
        }
    </style>
    <script type="text/javascript" src="/assets/js/jquery.js"></script>
    <script type="text/javascript" src="/assets/lib/ztree/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="/assets/lib/ztree/js/jquery.ztree.exedit.js"></script>
    <script language="JavaScript">
        //选择的节点
        var selNode;
        var treeObj;
        // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
        var setting = {
            async: {
                enable: true,
                url: "nodes.cgi",
                autoParam: ["id"],
                dataType: "json",
            },
            callback: {
                onClick: clickNode,
                onRename: onRename,
                onRemove: onRemove
            }
        };

        //初始数据，加载节点
        $(document).ready(function () {
            $.getJSON("nodes.htm", function (json) {
                treeObj = $.fn.zTree.init($("#treeDemo"), setting, json);
            });

            $("#btnAdd").on("click", function () {
                if (typeof(selNode) == "undefined") {
                    alert("请先选择一个节点");
                    return;
                }
                var newNode = {name: "newNode1"};
                treeObj.addNodes(selNode, 0, newNode);
            });

            $("#btnEdit").on("click", function () {
                if (typeof(selNode) == "undefined") {
                    alert("请先选择一个节点");
                    return;
                }
                treeObj.editName(selNode);
            });

            $("#btnDel").on("click", function () {
                if (typeof(selNode) == "undefined") {
                    alert("请先选择一个节点");
                    return;
                }
                //删除节点
                treeObj.removeNode(selNode, true);
            })
        });

        //点击某个节点
        function clickNode(event, treeId, treeNode) {
//            var treeObj = $.fn.zTree.getZTreeObj("treeDemo"),
//                    nodes = treeObj.getSelectedNodes(),
//                    selName = "", selId = "";

//            var childNodes=treeNode.children;
//            for (var i = 0; i < childNodes.length; i++) {
//                selName = childNodes[i].name;
//                selId = childNodes[i].id;
//                alert(selName + "----" + selId);
//            }
            //获取全部子节点
            var ids = [];
            ids = getChildren(ids, treeNode);
            $.each(ids, function (index, node) {
                alert(node.id);
            });
        }

        function onRename() {
            if (selNode.name === '') {
                alert("请输入节点名称");
                treeObj.cancelEditName();
                //treeObj.setEditable(false);
                return;
            }

            alert("修改节点名称：" + selNode.name + "修改节点ID：" + selNode.id);
        }

        function onRemove() {
            alert("删除节点名称：" + selNode.name + "删除节点ID：" + selNode.id);
        }

        //递归全部子节点
        function getChildren(ids, treeNode) {
            ids.push(treeNode);
            if (treeNode.isParent) {
                for (var obj in treeNode.children) {
                    getChildren(ids, treeNode.children[obj]);
                }
            }
            return ids;
        }
    </script>
</head>
<body>
<div>
    <input type="button" value="增加" id="btnAdd">
    <input type="button" value="编辑" id="btnEdit">
    <input type="button" value="删除" id="btnDel">
</div>
<div>
    <ul id="treeDemo" class="ztree"></ul>
</div>
</body>
</html>